<template>
  <div class="skill-block mask" @mouseenter="showDes" @mouseleave="hideDes">
    <img :src="skillInfo.icon" alt />
    <div v-show="skillInfo.isHover" class="description mask">{{ skillInfo.des }}</div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    const state = reactive({
      skillInfo: {
        isHover: false,
        id: 0,
        icon: 'http://127.0.0.1:9600/assets/images/icon/heal.png',
        des: '这是一个测试用的说明。Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore officiis praesentium sed ea aspernatur obcaecati error ex possimus iure odit, sint neque modi porro asperiores assumenda vero ipsum velit facilis!'
      }
    })

    const showDes = () => {
      state.skillInfo.isHover = true
    }
    const hideDes = ()=>{
      state.skillInfo.isHover = false
    }

    return {
      ...toRefs(state),
      showDes,hideDes
    }
  },
}
</script>
<style lang="less" scoped>
  @import '../../../theme.less';
.skill-block {
  max-width: 200px;
  border: 1px solid @theme-line;
  border-radius: 8%;
  position: relative;
  cursor: pointer;
  padding: 4px;
  img {
    border: 1px solid #fff;
    border-radius: 8%;
  }

  .description{
    width: 220px;
    position: absolute;
    border: 1px solid @theme-line;
    border-radius: 6px;
    padding: 20px;
    top: 0;
    left: calc(100% + 10px);
    background-color: rgba(0, 0, 0, .3);
    z-index: 5;
    color: #fff;
  }
}
</style>